/*
 * @Title: 群聊模块
 * @Created by: gsjPC 
 */
<template>
	<view> 
		<IndexHead :config="navConfig" :rightIcoHandle="rightIcoHandle"/>
		<view class="content">
			 <!-- @scrolltoupper="loadHistory" -->
			<scroll-view 
			 class="chatList" 
			 scroll-y="true" 
			 :scroll-with-animation="scrollAnimation" 
			 :scroll-top="scrollTop" 
			 :scroll-into-view="scrollIntoViewText" 
			
			 upper-threshold="50">
			 <!-- 加载历史数据waitingUI -->
			 
			 <!-- 对话框 -->
				<view class="row">
					<!-- 用户消息 -->
					<block >
						<!-- 别人发出的消息 -->
						<view class="other">
							<!-- 左 头像 -->
							<view class="left">
								<image src="/static/textTx2.jpg"></image>
							</view>
							<!-- 右 消息-->
							<view class="right">
								<!-- 昵称 -->
								<!-- <view class="username">
									<view class="name">王多鱼</view>
								</view> -->
								<view class="bubble">
									<rich-text nodes="所有人下午五点，餐厅门口集合!"></rich-text>
								</view>
							</view>
						</view>
					</block>
				</view>
				<view class="row">
					<!-- 用户消息 -->
					<block >
						<!-- 别人发出的消息 -->
						<view class="other">
							<!-- 左 头像 -->
							<view class="left">
								<image src="/static/textTx3.jpg"></image>
							</view>
							<!-- 右 消息-->
							<view class="right">
								<!-- 昵称 -->
								<view class="username">
									<view class="name">Fawee</view>
								</view>
								<view class="bubble">
									<rich-text nodes="+1"></rich-text>
								</view>
							</view>
						</view>
					</block>
				</view>
				<view class="row">
					<!-- 系统消息 -->
					<!-- <block v-if="row.type=='system'" >
						<view class="system">
							
							<view v-if="row.msg.type=='text'" class="text">
								{{row.msg.content.text}}
							</view>
							
							<view v-if="row.msg.type=='redEnvelope'" class="red-envelope">
								<image src="/static/img/red-envelope-chat.png"></image>
								{{row.msg.content.text}}
							</view>
						</view>
					</block> -->
				</view>
				<view class="row">
					<!-- 用户消息 -->
					<block >
						<!-- 自己发出的消息 -->
						<view :id="getSelfTalkId(index)" class="my" v-for="(my, index) in msgList" :key="index">
							<!-- 左 消息 -->
							<view class="left">
								<view class="bubble">
									<rich-text :nodes="my.msg"></rich-text>
								</view>
							</view>
							<!-- 右 头像 -->
							<view class="right">
								<image src="/static/testTx1.jpg"></image>
							</view>
						</view>
					</block>
				</view>
			</scroll-view>
		</view>
		<!-- 抽屉栏 -->
		<!-- :class="popupLayerClass" -->
		<view class="popup-layer"  :class="{'showLayer': DrawerOpenStatus}">
			<!-- 更多功能  图片 拍照 语音通话...... -->
			
			<view v-if="emojiAreaShown" class="emoji-are">
				<emotion @emotion="handleEmotion" :height="300" ></emotion>
			</view>
			
			<view v-else class="more-layer" :class={hidden:hideMore}>
				<view class="list">
					<view class="moreBox" @tap="chatView">
						<image src="/static/chatView.png"></image>
						<text>当前景区</text>
					</view>
					<view class="moreBox" @tap="chatRouter">
						<image src="/static/chatRouter.png"></image>
						<text>发起找人</text>
					</view>
					<view class="moreBox" @tap="chatHelp">
						<image src="/static/chatHelp.png"></image>
						<text>景区求助</text>
					</view>
					<view class="moreBox" @tap="chatCamear">
						<image src="/static/chatCamear.png"></image>
						<text>拍摄</text>
					</view>
					<view class="moreBox" @tap="chatPic">
						<image src="/static/chatPic.png"></image>
						<text>图片</text>
					</view>
					<view class="moreBox" @tap="chatHeart">
						<image src="/static/chatHeart.png"></image>
						<text>收藏</text>
					</view>
					<view class="moreBox" @tap="chatYuyin">
						<image src="/static/chatYuyin.png"></image>
						<text>语音通话</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部输入栏 -->
		<view class="input-box" :class="{'showLayer' : DrawerOpenStatus}">
			<!-- + -->
			<view class="icon yuyin"><image src="/static/chatVoice.png"></image></view>
			<!-- input -->
			<view class="textbox">
				<view class="voice-mode" :class="[isVoice?'':'hidden',recording?'recording':'']" @touchstart="voiceBegin" @touchmove.stop.prevent="voiceIng" @touchend="voiceEnd" @touchcancel="voiceCancel">{{voiceTis}}</view>
				<view class="text-mode"  :class="isVoice?'hidden':''">
					<view class="box">
						<textarea auto-height="true" v-model="textMsg" @focus="textareaFocus"/>
					</view>
				<!-- 	<view class="em" @tap="chooseEmoji">
						<view class="icon biaoqing"><image src="/static/chatIde.png"></image></view>
					</view> -->
				</view>
			</view>
			<view class="rightIcon">
				<!-- emoil -->
				<view v-if="emojiAreaShown" @tap="showEmoji" class="keyboardIcon iconfont">&#xe60e;</view>
				<view v-else class="chatIde" @tap="showEmoji"><image src="/static/chatIde.png"></image></view>
				
				
				<!-- 发送 -->
				<!-- <view v-if="inputSendAbleStatus" class="send" :class="isVoice?'hidden':''" @tap="sendText"> -->
				<view v-if="inputSendAbleStatus" class="addIco" @tap="sendBtnTapHandle">
					发送
				</view>
				<!-- </view> -->
				<!-- +更多 -->

				<view v-else class="showMore" @tap="showMore"><image src="/static/chatAdd.png"></image></view>
				
			</view>
			<!-- 发送 -->
			<!-- <view class="send" :class="isVoice?'hidden':''" @tap="sendText">
				<view class="addIco"><image src="/static/chatAdd.png"></image></view>
			</view> -->
			
		</view>
		
		<!-- 群聊里面点击头部右上角的 Action Sheet -->
		<!-- 设置弹出的 ActionSheet -->
		<uni-popup style="z-index:9999;" @change="popChangeHandle" ref="setpopup" type="bottom" :maskClick="true" :show="settingPopShow">
			<view class="set-pop-wrap" :style="{ marginBottom: navigationBarHeight }">
				<ul>
					<li>置顶聊天</li>
					<li @tap="tagAddBtn">添加标签</li>
					<li>消息免打扰</li>
					<li>清空聊天记录</li>
					<li>删除</li>
				</ul>
				<view class="set-popup-cancel" @click="closeSetPop">
					取消
				</view>
			</view>
		</uni-popup>
		
		
	</view>
</template>

<script>
	function emotion(res) {
		//console.log('mess', res)
		let word = res.replace(/\#|\;/gi, '')
		//console.log(word)
		const list = ['微笑', '撇嘴', '色', '发呆', '得意', '流泪', '害羞', '闭嘴', '睡', '大哭', '尴尬', '发怒', '调皮', '呲牙', '惊讶', '难过', '酷',
			'冷汗', '抓狂', '吐', '偷笑', '可爱', '白眼', '傲慢', '饥饿', '困', '惊恐', '流汗', '憨笑', '大兵', '奋斗', '咒骂', '疑问', '嘘', '晕', '折磨', '衰',
			'骷髅', '敲打', '再见', '擦汗', '抠鼻', '鼓掌', '糗大了', '坏笑', '左哼哼', '右哼哼', '哈欠', '鄙视', '委屈', '快哭了', '阴险', '亲亲', '吓', '可怜',
			'菜刀', '西瓜', '啤酒', '篮球', '乒乓', '咖啡', '饭', '猪头', '玫瑰', '凋谢', '示爱', '爱心', '心碎', '蛋糕', '闪电', '炸弹', '刀', '足球', '瓢虫',
			'便便', '月亮', '太阳', '礼物', '拥抱', '强', '弱', '握手', '胜利', '抱拳', '勾引', '拳头', '差劲', '爱你', 'NO', 'OK', '爱情', '飞吻', '跳跳',
			'发抖', '怄火', '转圈', '磕头', '回头', '跳绳', '挥手', '激动', '街舞', '献吻', '左太极', '右太极'
		]
		let index = list.indexOf(word)
		return `<img src="https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/${index}.gif" align="middle">`
	};
	function analysisMsg(msg) {
		var analysisReg=  /\#[\S]{1,3}\;/gi;
		return msg.replace(analysisReg, emotion(msg))
	};
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import Emotion from '@/components/yszyun-imchat-emoji/Emotion'
	export default{
		components: { Emotion, uniPopup },
		data(){
			return{
				navConfig:{
					backgroundColor: 'transparent',
					color: '#fff',
					common:{
						hasSearch:false,
						hasMenu:false,
						hasTitle:true,
						minHead:true,
					},
					left: {
						img:'',
						text:'',
						showBack:true
					},
					mid:{
						title:'鸭鸭的群聊（3）',
						hasSearchMid:false,
						showAddIcon:true,
						rightIco:'/static/chatPeo.png'
					},
				},
				
				DrawerOpenStatus: false, // 抽屉打开状态
				textMsg: '',  // 文本域的双向绑定值
				emojiAreaShown: false, // 决定 emoji view 的 v-if，和 more Area
				popupLayerClass:'',// 抽屉参数
				hideMore:true, //默认隐藏
				msgList:[
					{  msg: '收到。'},
				],
				scrollTop: 0, // 自己消息列表框的 scrollTop 值
				
				// Action Sheet
				settingPopShow: false, // 弹框是否可见
				navigationBarHeight: global.navigationBarHeight + 'px'
			}
		},
		watch: {
			scrollTop(val) {
				console.warn(val);
			}
		},
		computed: {
			scrollIntoViewText() {
				return `a${String(this.msgList.length - 1)}`
			},
			inputSendAbleStatus() {
				return this.textMsg.trim() !== '';
			}
		},
		methods:{
			tagAddBtn() {
				// 跳转到添加标签页面
				uni.navigateTo({
					url: 'pages/lvyouquan/newTag/newTag'
				})
			},
			popChangeHandle({show}){
				
				console.warn(show);
				// #ifdef H5
				this.settingPopShow = show;
				// #endif
				// #ifndef H5
				this.$parent.settingPopShow = show;
				// #endif
			},
			rightIcoHandle() {
				console.log('exec')
				// #ifdef H5
				this.settingPopShow = true;
				// #endif
				// #ifndef H5
				this.$parent.settingPopShow = true;
				// #endif
			},
			closeSetPop() {
				// #ifdef H5
				this.settingPopShow = false;
				// #endif
				// #ifndef H5
				this.$parent.settingPopShow = false;
				// #endif
			},
			getSelfTalkId(index) {
				return `a${String(index)}`
			},
			async sendBtnTapHandle() {
				let msg = analysisMsg(this.textMsg);
				this.msgList.push({msg});
				this.textMsg = '';
				this.$nextTick(() =>{
					this.scrollTop += 50;
				})
			},
			handleEmotion(i) {
				this.textMsg += i;
			},
			showEmoji() {
				if(this.DrawerOpenStatus) {
					if(!this.hideMore) {
						console.log(`隐藏掉功能区`)
						this.hideMore = true;
						this.emojiAreaShown = true;
						return;
					} else {
						// this.emojiAreaShown = true;
						this.hideDrawer();
					};
					if(this.emojiAreaShown) {
						this.emojiAreaShown = false;
						this.hideDrawer();
						return;
					};
					
				} else {
					this.openDrawer();
					if(!this.emojiAreaShown) {
						this.emojiAreaShown = true;
					}
				}
				
			},
			emojiShowStatusFalsify() {
				this.emojiAreaShown = false;
			},
			// 底部➕更多功能（点击+弹出）
			showMore(){
				if(this.DrawerOpenStatus) {
					if(this.emojiAreaShown) {
						console.log(`隐藏掉表情区`)
						this.emojiAreaShown = false;
						this.hideMore = false;
						return;
					} else {
						this.hideDrawer();
					};
					if(!this.hideMore) {
						this.hideMore = true;
						this.hideDrawer();
						return;
					}
					
					
					
				} else {
					this.openDrawer();
					if(this.hideMore) {
						this.hideMore = false;
					}
				}
				
				
			},
			//打开抽屉
			openDrawer(){
				this.DrawerOpenStatus = true;
				// this.popupLayerClass = 'showLayer'
			},
			// 隐藏抽屉
			hideDrawer(){
				this.DrawerOpenStatus = false;
				// this.popupLayerClass = '';
				// this.emojiShowStatusFalsify();
				// setTimeout(()=>{
				// 	this.hideMore = true;
				// },150)
			}
		}
	}
</script>

<style>
	
	
	.content{
		margin:0 32upx;
	}
	.chatList{
		height: 500upx;
	}
	.row{
		margin-bottom: 30upx;
	}
	/* 我发消息的样式 */
	.my{
		width:100%;
		display: flex;
		justify-content: flex-end;
	}
	.my .left{
		min-height: 80upx;
		align-items: center;
		justify-content: flex-end;
	}
	.my .left .bubble{
		max-width:70%;
		border-radius: 10upx;
		padding:14upx 20upx;
		display: flex;
		align-items: center;
		font-size: 24upx;
		color: #FFFFFF;
		background:#5692FF;
		position: relative;
	}
	.my .left .bubble:after{
		content:'';
		position: absolute;
		right: -20upx;
		border:0;
		border:10upx solid transparent;
		border-left-color:#5692FF;
	}
	.my .right{
		margin-left: 24upx;
	}
	.my .right image{
		width:84upx;
		height: 84upx;
	}
	/* 其他人发消息样式 */
	.other{
		width:100%;
		display: flex;
	}
	.other .left{
		margin-right:24upx;
		width:84upx;
		height: 84upx;
	}
	.other .left image{
		width:84upx;
		height:84upx;
	}
	.other .right .username{
		width:100%;
		height: 44upx;
		font-size: 22upx;
		color: #999999;
		display: flex;
	}
	.other .right .bubble{
		max-width:70%;
		border-radius: 10upx;
		padding:14upx 20upx;
		display: flex;
		align-items: center;
		font-size: 24upx;
		color: #333333;
		border: 1upx solid #DCDCDC;
		position: relative;
	}
	.other .right .bubble:before{
		content:'';
		position: absolute;
		left: -11upx;
		 width: 10upx;
		  height: 10upx !important;
		  border-bottom: 4upx solid #DCDCDC;
		  border-right: 4upx solid #DCDCDC;
		  background:#FFFFFF;
		  transform: rotate(135deg);
		  
	}
	/* 底部输入栏 */
	.input-box{
		width:100%;
		box-sizing:border-box;
		background-color: #FFFFFF;
		padding:0 30upx;
		min-height: 100upx;
		display: flex;
		position: fixed;
		z-index: 20;
		bottom: -1px;
		transform: all .15s linear;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
 .more{
	 width:90upx;
	 height: 100upx;
	 display: flex;
	 justify-content: center;
	 align-items: center;
 }
 .textbox{
	 width: 432upx;
	 min-height: 70upx;
	 margin-top: 14upx;
 }
 .box{
	 padding: 0 14upx;
	 min-height: 70upx;
	 display: flex;
	 align-items: center;
	 border-bottom: 1upx solid #ddd;
 }
 .input-box .send{
	 margin-left: 20upx;
	 width:100upx;
	 height: 100upx;
	 display: flex;
	 align-items: center;
 }
 .input-box .send {
	
 }
 .rightIcon{
	 display:flex;
	 flex-direction: row;
	 align-items: center;
	 justify-content: flex-end;
 }
 .biaoqing{
	 width: 68upx;
	 height: 68upx;
 }
 .yuyin, .showMore, .chatIde, .addIco{
	 width: 68upx;
	 height: 68upx;
 }
 
 .addIco {
	 width: 100upx;
	 font-size: 22upx;
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 background: #577BFF;
	 color: #fff;
 }
.yuyin image,.showMore image,.chatIde image  {
	 width: 68upx;
	 height: 68upx;
 }
 
 .keyboardIcon {
	 font-size: 60upx;
	 margin-right: 10upx;
 }
 .chatIde{
	 margin-right:30upx;
 }
 
 /* 更多功能  图片 拍照 语音通话. */
 .popup-layer{
	width:100%;
	height: 548upx;
	transition:all .15s linear;
	padding: 20upx 2%;
	background-color: #ffffff;
	border-top:1upx solid #CCCCCC;
	position: fixed;
	z-index: 20;
	top:100%;
	box-sizing: border-box;
 }

 .more-layer, .emoji-layer{
	 width:100%;
	 height: 548upx;
	 margin-top: 26upx;
 }
 .moreBox {
	 display: flex;
	 flex-direction: column;
	 align-items: center;
	 width: 25%;
 }
 
 .moreBox > text {
	font-size: 22upx;
	color: rgba(97,97,96,1.00)
 }
 
 .moreBox image{
	 width:96upx;
	 height:96upx;
	 margin-bottom: 10upx;
 }
 .input-box.showLayer{
	 transform: translate3d(0,-548upx,0)
 }
 .popup-layer.showLayer{
	  transform: translate3d(0,-548upx,0)
 }
 .list{
	 display: flex;
	 flex-direction: row;
	 flex-wrap: wrap;
 }
 .list .moreBox{
	 margin-top: 70upx;
 }
 
 /* 设置弹出的 ActionSheet */
 .set-pop-wrap {
 	max-width: 100%;
 	box-sizing: border-box;
 	overflow: hidden;
 	/* margin-bottom: 100upx; */
 }
 .set-popup-cancel {
 	text-align: center;
 	border-top: 15upx solid #ccc;
 	padding: 20upx 0;
 }
 
 .set-pop-wrap ul {
 	list-style: none;
 	padding: 0;
 }
 
 .set-pop-wrap li {
 	text-align: center;
 	padding: 20upx 0;
 	border-bottom: 1upx solid #eee;
 	font-size: 24upx;
 }

</style>
